
<template>
	<el-form :model="searchParams" ref="queryForm" :inline="true" size="small" @submit.native.prevent>
		<el-form-item
			:label="item.label"
			v-for="item in paramsList"
			:key="item.key"
		>
			<el-date-picker
				v-if="item.type == 'date'"
				v-model="searchParams[item.key]"
				style="width: 240px"
				value-format="yyyy-MM-dd"
				type="daterange"
				range-separator="-"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				@change="setDates(item.key)"
			></el-date-picker>
			<el-date-picker
				style="width: 240px"
				v-if="item.type == 'datetime'"
				v-model="searchParams[item.key]"
				type="date"
				value-format="yyyy-MM-dd"
				:placeholder="`请选择${item.label}`"
			>
			</el-date-picker>
			<el-input
				v-else-if="item.type == 'input'"
				v-model="searchParams[item.key]"
				:placeholder="`请输入${item.label}`"
				clearable
				style="width: 240px"
				@keyup.enter.native="handleQuery"
			/>
			<el-select
				v-else-if="item.type == 'select'"
				v-model="searchParams[item.key]"
				:placeholder="`请选择${item.label}`"
			>
				<el-option
					v-for="i in item.options"
					:key="i.value"
					:label="i.label"
					:value="i.value"
				>
				</el-option>
			</el-select>
      <el-select
        v-else-if="item.type == 'dictSelect'"
        v-model="searchParams[item.key]"
        :placeholder="`请选择${item.label}`"
      >
        <el-option
          v-for="i in item.options"
          :key="i.dictValue"
          :label="i.dictLabel"
          :value="i.dictValue"
        >
        </el-option>
      </el-select>
			<template v-else-if="item.type == 'text'">
				{{ searchParams[item.key] }}
			</template>
		</el-form-item>
		<el-form-item>
			<el-button
				type="primary"
				icon="el-icon-search"
				size="mini"
				@click="handleQuery"
				>搜索</el-button
			>
			<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
				>重置</el-button
			>
		</el-form-item>
	</el-form>
</template>

<script>
export default {
	name: 'searchCommon',
	props: {
		paramsList: {
			type: Array,
			default: () => [],
		},
		searchParams: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			selectForm: {},
		};
	},
	methods: {
		// 设置时间格式
		setDates(value) {
			this.selectForm[
				value
			] = `${this.searchParams[value][0]}-${this.searchParams[value][1]}`;
		},
		/**
		 * 搜索
		 */
		handleQuery() {
			let obj = { ...this.searchParams, ...this.selectForm };
			let from = {};
			for (let i in obj) {
				(obj[i] || obj[i] === 0) && (from[i] = obj[i]);
			}
			this.$emit('search', from);
		},

		/**
		 * 重置
		 */
		resetQuery() {
			for (let i in this.searchParams) {
				this.searchParams[i] = '';
			}
			this.$refs['queryForm'].resetFields();
			this.$emit('search', {});
		},
	},

	mounted() {
		this.handleQuery();
	},
};
</script>
